<!-- 咨询订单列表 -->
<template>
  <publicPage>
    <view class="tabsFlex1">
      <view class="bgf borderB">
        <u-tabs
          :list="tabsList"
          style="width: 100%"
          @change="tabsChange"
        ></u-tabs>
      </view>
      <scroll-view
        v-if="list.length && listLoad"
        scroll-y
        style="height: calc(100% - 50px)"
        @scrolltolower="scrolltolower"
        refresher-enabled
        :refresher-triggered="refresherTriggered"
        @refresherrefresh="refresherrefresh"
      >
        <view
          v-for="(item, index) in list"
          :key="index"
          class="bgf forBox"
        >
          <view @click="goDetails(item)">
            <view class="disFlxJS px-15 borderB linh-50">
              <view>{{item.callType == 3 ? '服务项目' : (item.callType == 2 ? '预约咨询' : '即时咨询')}}</view>
              <view :style="'color: ' + sonStatusFind(item.sonStatus,'colors')">{{sonStatusFind(item.sonStatus,'label')}}</view>
            </view>
            
            <template v-if="item.callType == 3">
              <view class="disFlxJS linh-26 px-15 pt-10">
                <view class="color8 shrink0 pr-50">服务机构</view>
                <view>{{ item.checkAgencyName }}</view>
              </view>
              <view class="disFlxJS linh-26 px-15">
                <view class="color8 shrink0 pr-50">申请人</view>
                <view>{{ item.sponsor }}</view>
              </view>
              <view class="disFlxJS flexAlignTop linh-20 py-3 px-15">
                <view class="color8 shrink0 pr-50">申请机构</view>
                <view>{{ item.companyName || "" }}</view>
              </view>
            </template>
            <InfoCard :item="item.expList[0]" v-else />
            <view class="disFlxJS linh-26 px-15" v-if="item.callType == 3">
              <view class="color8 shrink0 pr-50">消费人信息</view>
              <view>{{ item.username }} {{ item.userphone || "" }}</view>
            </view>
            <view class="disFlxJS linh-26 px-15" v-else>
              <view class="color8 shrink0 pr-50">咨询人信息</view>
              <view v-if="item.orderOrd && item.orderOrd.patientName">{{ item.orderOrd.patientName }} {{ item.orderOrd.patientPhone || "" }}</view>
              <view v-else>{{ item.username }} {{ item.userphone || "" }}</view>
            </view>
            <view v-if="item.callType == 2" class="disFlxJS linh-26 px-15">
              <view class="color8 shrink0 pr-50">预约时间</view>
              <view>{{ item.orderOrd.ortStr }}</view>
            </view>
            <view class="disFlxJS linh-26 px-15">
              <view class="color8 shrink0 pr-50">{{item.status == 0 || item.status == 2 || item.status == 3 ? '实付金额' : '需付金额'}}</view>
              <view style="color: #c5a028">{{ item.cost || 0 }}云豆</view>
            </view>
            <view class="disFlxJS linh-26 px-15 pb-10">
              <view class="color8 shrink0 pr-50">下单时间</view>
              <view>{{ item.createTime }}</view>
            </view>
          </view>
          <OrderBtnList page="orderList" :item="item" @sginSuccess="sginSuccess" @upList="resetList" />
        </view>
      </scroll-view>
      <view style="height: calc(100% - 50px)" class="defaultPage disFlxCC" v-if="!list.length && listLoad">
        <view class="fz-18 color8">暂无订单</view>
      </view>
    </view>

    <StatusPopup :show="qdObject.show" mode="center" title="恭喜您，签到成功" type="success" btnText="确定" @close="qdObject.show = false" @confirm="qdObject.show = false">
      <view class="tc">
        <view class="pt-20 fz-16">您的咨询号为：<text style="color:#BB9313;">{{qdObject.listno}}</text></view>
        <view class="fz-14 color8 pt-2">前面还有<text style="color:#BB9313;" class="px-3">{{qdObject.wailnum}}</text>人在候诊，请保持联系</view>
      </view>
    </StatusPopup>
  </publicPage>
</template>

<script>
import InfoCard from "@/components/infoCard.vue";
import OrderBtnList from "./orderBtnList.vue";
import StatusPopup from "../components/statusPopup.vue";
import orderApi from "@/api/order.js";

export default {
  components: {
    InfoCard,
    OrderBtnList,
    StatusPopup
  },
  data() {
    return {
      tabsList: [
        {
          name: "全部",
          value: "",
        },
        {
          name: "待支付",
          value: "1",
        },
        {
          name: "服务中",
          value: "0,2",
        },
        {
          name: "已完成",
          value: "3",
        },
      ],
      sonStatus: [
        {label: '待付款',value: '10',colors: '#0D8BFF'}, // 待专家付款 显示关闭订单按钮
        {label: '待付款',value: '11',colors: '#0D8BFF'}, // 待用户付款 立即支付,关闭订单
        {label: '未接听',value: '21',colors: '#FF5F5F'}, // 显示 呼叫(即时咨询),取消订单
        {label: '待通话',value: '22',colors: '#0D8BFF'}, // 显示 呼叫(即时咨询),取消订单
        {label: '通话中',value: '23',colors: '#BB9313'}, // 显示 加入会议(即时咨询)
        {label: '已预约',value: '51',colors: '#333333'}, // 显示 取消订单(预约咨询)
        {label: '待签到',value: '52',colors: '#0D8BFF'}, // 显示 立即签到,取消订单(预约咨询)
        {label: '已签到',value: '53',colors: '#333333'}, // 显示 取消订单(预约咨询)
        {label: '已过期',value: '54',colors: '#333333'}, // 显示 查看详情
        {label: '待核销',value: '60',colors: '#0D8BFF'}, // 显示 取消订单(服务项目)
        {label: '已核销',value: '61',colors: '#333333'}, // 无操作
        {label: '待使用',value: '62',colors: '#0D8BFF'}, // 无操作
        {label: '待发货',value: '63',colors: '#0D8BFF'}, // 无操作
        {label: '待收货',value: '64',colors: '#0D8BFF'}, // 显示 确认收货
        {label: '已发货',value: '65',colors: '#333333'}, // 无操作
        {label: '已完成',value: '71',colors: '#333333'}, // 24H重呼(即时咨询)
        {label: '已退款',value: '72',colors: '#FF5F5F'}, // 无操作
        {label: '已取消',value: '73',colors: '#FF5F5F'}, // 无操作
        {label: '已关闭',value: '74',colors: '#FF5F5F'}, // 无操作
      ],

      list: [],
      listLoad: false, // 加载是否完成
      getParams: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
        status: "",
        orderSource: 0, // 订单来源: 0宜健 1合作中医
      },
      refresherTriggered: false,
      qdObject: {
        show: false,
        wailnum: "", // 等待人数
        listno: "" // 排队号
      }
    };
  },
  onLoad() {
    this.getParams.status = this.tabsList[0].value;
    this.getList();
  },
  methods: {
    // 获取订单列表
    async getList() {
      const { data, total } = await orderApi.orderList(this.getParams).finally(()=>{this.listLoad = true});
      data.forEach(v => {
        v.createTime = v.createTime ? v.createTime.substr(0, v.createTime.length - 3) : ""
      });
      this.list = this.getParams.pageNum === 1 ? data : [...this.list, ...data];
      this.getParams.total = total;
    },
    // 切换订单状态筛选
    tabsChange(e) {
      Object.assign(this.$data.getParams, this.$options.data().getParams);
      this.listLoad = false;
      this.getParams.status = e.value;
      this.getList();
    },
    // 加载更多
    scrolltolower() {
      if (this.list.length !== this.getParams.total) {
        // u-view内部节流函数
        uni.$u.throttle(() => {
          this.getParams.pageNum++;
          this.getList();
          console.log(this.getParams.pageNum, "滚动加载");
        }, 2000);
      } else {
        console.log("没有更多了");
      }
    },
    async refresherrefresh() {
      this.refresherTriggered = true;
      this.$data.getParams.pageNum = this.$options.data().getParams.pageNum
      this.$data.getParams.total = this.$options.data().getParams.total
      await this.getList();
      console.log(this.getParams.pageNum, "下拉刷新");
      setTimeout(() => {
        this.refresherTriggered = false;
      }, 1000);
    },
    // 刷新订单列表
    resetList(){
      this.$data.getParams.pageNum = this.$options.data().getParams.pageNum;
      this.$data.getParams.total = this.$options.data().getParams.total;
      this.getList();
    },
    // 跳转详情
    goDetails(item){ 
      this.$store.commit("SET_SESSIONOBJ", item);
      this.goPage(`/pagesC/order/orderDetails?orderNo=${item.orderNo}`)
    },
    // 获取订单状态
    sonStatusFind(val,keys){
      const obj = this.sonStatus.find(v=> v.value === val)
      if(!obj){console.log(obj,'后端订单状态异常对象')}
      return obj[keys]
    },
    // 签到成功,打开弹窗
    sginSuccess(id){
      orderApi.getOrderDetail({ id }).then((res) => {
        const { info } = res.data
        this.qdObject.listno = info.orderOrd.listno
        this.qdObject.wailnum = info.orderOrd.wailnum
        this.qdObject.show = true
      });
    }
  },

  created() {},

  computed: {},
};
</script>
<style lang='scss' scoped>
.tabsFlex1 {
  height: 100%;
  .forBox + .forBox {
    margin-top: 30rpx;
  }
}
</style>